<template>
   <div class="wrapper right">
       <h1 class="title">{{this.data.first_title}}</h1>
        <p class="second-title">发布日期：{{this.data.create_time}}；浏览次数：{{this.data.hit}}</p>
        <div class="guide">
            <div class="pic"><img src="@/assets/news-list/feature.png" alt=""></div>
            <p class="guide-center">{{this.data.second_title}}</p>
        </div>
        <div class="news" v-html="this.data.summary"></div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import axios from 'axios'


export default {
  name: 'news-right',
  props:{
      data:Object
  },
  data () {
    return {
      msg: 'index',
     
    }
  },
   computed:{
        ...mapState(['baseUrl'])
    },
  mounted() {
  
    
  },
  watch:{
      data(){
          console.log(this.data)
      }
  }
 
  
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
@import "~styles/mixins.styl"
img 
    width 100%
.container
  container()  

.right 
    float right
    width 880px
    border 1px solid #666666
.title 
    text-align center 
    padding-bottom: 10px;
    font-size: 16px;
    color: #000;
    margin-top 30px;
.second-title 
    color #B3B3B3
    font-size 12px
    text-align center
    padding-bottom 40px
    border-bottom 2px solid #4D4948
    margin 0 20px
.guide 
    margin 20px
    background #F6F6F6
    position relative
    .pic 
        position absolute
        left 0 
        top 0
    .guide-center
        padding 20px 40px
.news 
    margin 20px 20px 50px 20px
    overflow hidden
</style>
